<template>
  <div id="myrightGroup">
      <search
      @result-click="resultClick"
      @on-change="getResult"
      :results="results"
      v-model="value"
      cancel-text="取消"
      :autoFixed=true
      auto-scroll-to-top top="46px"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="search"></search>
    
    <flexbox v-if="isSearch == false" :gutter="0" wrap="wrap" class="contentWrap">
      <flexbox-item  :span="1/4">
        <div class="flex-demo" >
          <scroller :height="myHeight" ref="leftScroller" class="leftScroll" lock-x scrollbar-y>
      
              <group>
                <cell :class="{active:i==currentLeftIndex}" v-for="(key, i) in smallArr" :key="key" @click.native="onCellClick(i)" :title="key" :value="i"></cell>
              </group>
            
          </scroller>
        </div></flexbox-item>
      <flexbox-item :span="3/4">
        <div class="flex-demo" >
          <scroller @on-scroll="onScroll" :height="myHeight" class="rightScroll" lock-x scrollbar-y ref="rightScroller">
            <div class="box2">
              <group ref="myGroup" v-for="(key, i) in smallArr" :key="key">
                <group-title ref="groupTitle">{{key}}</group-title>
                <grid :cols="myCols" id="myGrid">
                  <!--<grid-item v-for="i in 5" label="小米手机" :key="i" icon="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4223445256,1173646510&fm=27&gp=0.jpg">
                  </grid-item>-->
                  <grid-item   label="小米手机" key="1" icon="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4223445256,1173646510&fm=27&gp=0.jpg">
                  </grid-item>
                  <grid-item   label="小米手机" key="2" icon="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg">
                  </grid-item>
                  <grid-item   label="小米手机" key="3" icon="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4223445256,1173646510&fm=27&gp=0.jpg">
                  </grid-item>
                  <grid-item   label="小米手机" key="4" icon="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg">
                  </grid-item>
                  <grid-item   label="小米手机" key="5" icon="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4223445256,1173646510&fm=27&gp=0.jpg">
                  </grid-item>
                </grid>
              </group>
              

              
            </div>
          </scroller>
        </div>
      </flexbox-item>
    </flexbox>
    <!-- 搜索界面 -->
    <div v-else>
      <card>
        <div slot="content" class="card-demo-flex card-demo-content01">
          <div @click="cardCLick" class="vux-1px-l vux-1px-r">
            综合
          </div>
          <div @click="cardCLick" class="vux-1px-r">
            销量<icon type="download"></icon>
          </div>
          <div @click="cardCLick" class="vux-1px-r">
            价格<icon type="download"></icon>
          </div>
          <div @click="cardCLick">
            筛选
          </div>
        </div>
      </card>

      <!-- 图文列表 -->
      <shop-cell :list="list"></shop-cell>
      
    </div>

    <!-- 右侧抽屉弹出层 -->
    <div v-transfer-dom>
      <popup class="firstRightModel" v-model="isPopRight" position="right">
        <div style="width:330px; ">
          <div class="serviceAddredd">
            <!-- 位置 服务 -->
            <card>
              <div slot="content" class="card-demo-flex card-demo-content01">
                <div class="">
                  <span style="color:black;">嘉福祥服务</span>
                </div>
                <div class="vux-1px-r">
                  <map-marker-icon /><span>河南省郑州市中原区</span>
                </div>
              </div>
            </card>
            <!-- 多选按钮 -->
            <div class="myBtns">

              <div class="myBtnsRow">
                <x-button mini>submit</x-button>
                <x-button mini>submit</x-button>
                <x-button mini>submit</x-button>
              </div>
              <div class="myBtnsRow">
                <x-button mini>submit</x-button>
                <x-button mini>submit</x-button>
                <x-button mini>submit</x-button>
              </div>
            </div>

            <!-- 价格区间 -->
            <div class="priceArea">
              <div class="priceTitle">
                价格区间
                <div class="priceNumber">
                  <input type="text" placeholder="最低价"> 一 <input type="text" placeholder="最高价">
                </div>
              </div>
            </div>

            <!-- 全部分类 -->
            <group>
              <cell @click.native="showFenleiModel" title="全部分类" :value="selectClassifyCellData" is-link></cell>
            </group>
            
            <!-- 品牌 -->
            <group>
              <cell title="品牌" value="全部" is-link></cell>
            </group>

            <!-- 类型 -->
            <group>
              <cell title="类型" value="全部" is-link></cell>
            </group>

            <!-- 重置 确定按钮 -->
            <div class="resetAndConfirmWrap">
              <flexbox>
                <flexbox-item>
                  <x-button @click.native="modelResetClick" type="warn">重置</x-button>
                </flexbox-item>
                <flexbox-item>
                  <x-button @click.native="modelConfirmClick" type="primary">确定</x-button>
                </flexbox-item>
              </flexbox>
            </div>
            
          </div>
        </div>
      </popup>
    </div>

    <!-- 全部分类弹出层 -->
    <div v-transfer-dom>
      <popup style="background:white;" v-model="isFenleiPop" position="right">
        <div style="width:330px; ">
          <sticky>
            <x-header :left-options="{backText: '',preventGoBack: true }" @on-click-back="hideFenleiModel">全部分类</x-header>
          </sticky>
          
          <group class="zhedie">
            <template v-for="(item , i) in allClassifyCellData">
              <cell 
              :key="i"
              :title="item.name"
              is-link
              :border-intent="false"
              :arrow-direction="item.isZhankai ? 'up':'down'"
              @click.native="allClassifyCellClick(i)">
              </cell>
              <div v-for="(minItem , i) in item.data" class="slide" :class="item.isZhankai?'animate':''">
                <p>{{minItem.name}}</p>
              </div>
            </template> 

            </group>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import {XButton , Sticky , XHeader , Checker, CheckerItem , Panel, XSwitch , TransferDom , Popup ,  Icon , Card, Search, Group, Cell, Scroller, Flexbox, FlexboxItem, Divider, Grid, GridItem, GroupTitle , XInput} from 'vux'
import menu from './menu.js'
import ExampleStart from './ExampleStart'
import ShopCell from '../../components/toolComponent/shopCell.vue'

import MapMarkerIcon from "vue-material-design-icons/map-marker.vue"



import $ from 'jquery'
$(function () {
  $("#myGrid .weui-grid__icon").height($("#myGrid .weui-grid__icon").width())
})


// 全部分类中折叠cell的数据
const allClassifyCellDataFn = () => [
  {
    "name":"办公分类" ,
    "isZhankai":false, 
    "data":[
      {
        "name":"收银机"
      } , 
      {
        "name":"考勤机"
      } , 
      {
        "name":"碎纸机"
      }
    ]
  },
  {
    "name":"文具/耗材" ,
    "isZhankai":false,  
    "data":[
      {
        "name":"铅笔"
      } , 
      {
        "name":"课本"
      } , 
      {
        "name":"橡皮擦"
      }
    ]
  },
  {
    "name":"外设产品" , 
    "isZhankai":false, 
    "data":[
      {
        "name":"鼠标"
      },
      {
        "name":"键盘"
      }
    ]
  },
  {
    "name":"五金工具" , 
    "isZhankai":false, 
    "data":[
      {
        "name":"螺丝刀"
      } , 
      {
        "name":"扳手"
      } , 
      {
        "name":"电缆"
      } , 
      {
        "name":"钳子"
      } , 
      {
        "name":"铁锤"
      } , 
      {
        "name":"斧头"
      } , 
      {
        "name":"电流表"
      }
    ]
  }
]

export default {
  directives: {
    TransferDom
  },
  components: {
    Sticky,
    XHeader,
    MapMarkerIcon,
    ShopCell,
    Search,
    Group,
    Cell,
    ExampleStart,
    Scroller,
    Flexbox, 
    FlexboxItem, 
    Divider,
    Grid, 
    GridItem,
    GroupTitle , 
    XInput,
    Card, 
    Icon, 
    Panel, 
    XSwitch ,
    Popup,
    Checker, 
    CheckerItem,
    XButton
  },
  methods: {
    // 全部分类中折叠cell的点击事件
    allClassifyCellClick (cellIndex) {
      // console.log($(".zhedie .weui-cell").eq(cellIndex).attr("arrow-direction"))
      this.$data.allClassifyCellData[cellIndex].isZhankai = !this.$data.allClassifyCellData[cellIndex].isZhankai;
      // cell 展开内容的样式
      $(".slide p").height($(".zhedie .weui-cell").outerHeight())
      $(".slide p").css({"line-height":$(".slide p").height() + "px"})
      var that = this
      // 展开的小cell的点击事件
      $(".slide p").click(function (event) {
        event.preventDefault();
        event.stopPropagation();
        that.$data.selectClassifyCellData = event.target.innerText
        that.$data.isFenleiPop = false
      }) 
    },
    // 显示全部分类模块
    showFenleiModel(evnet) {
      event.preventDefault();
      event.stopPropagation();
      this.$data.isFenleiPop = true
    },
    // 隐藏全部分类模块
    hideFenleiModel(evnet) {
      event.preventDefault();
      event.stopPropagation();
      this.$data.isFenleiPop = false
    },
    // 旋转标签
    rotateElement (rotateEle) {
      if(rotateEle.hasClass("rotate")){ //点击箭头旋转180度
          rotateEle.removeClass("rotate");
          rotateEle.addClass("rotate1");
      }else{
          rotateEle.removeClass("rotate1"); //再次点击箭头回来
          rotateEle.addClass("rotate");
      }
    },
    // 弹出层重置按钮点击事件
    modelResetClick() {
      console.log("重置按钮.....")
    },
    // 弹出层确定按钮点击事件
    modelConfirmClick () {
      console.log("确定按钮.....")
      this.$data.isPopRight = false
    },
    // 修改多选按钮组中的样式样式
    modifyBtnsCss () {
      var that = this;
      $(".myBtnsRow").each(function (i , item) {
        if ($(item).children().length >= 2) {
          $(item).children().eq(0).css("margin" , $(item).children().eq(1).css("margin"))
          $(item).children().eq(0).css("margin-left" , "5px")
          $(item).children().eq(0).css("margin-right" , "5px")
        }
      })

      // 多选按钮点击事件
      $(".weui-btn_mini").click(function () {
        console.log("多选按钮点击事件...")
        if ($(this).hasClass("demo5-item-selected")) {
          $(this).removeClass("demo5-item-selected")
          $(this).css({"color":"#232326" , "border":"1px solid white" , "background-color":"#f0f2f5"})
        } else {
          $(this).addClass("demo5-item-selected")
          $(this).css({"color":"#fb3107" , "border":"1px solid #fb3107" , "background-color":"#ffffff"})
        }
      })
    },
    // 搜索界面头部选项卡点击事件
    cardCLick (event) {
      event.preventDefault();
      event.stopPropagation();
      var currentClickIndex = $(event.target).index()

      // 综合按钮
      if (currentClickIndex == 0) {
        console.log('综合')
        return
      }

      // 筛选按钮
      if (currentClickIndex == 3) {
        console.log("筛选按钮....")
        this.$data.isPopRight = true
        

        // 计算 重置/确定按钮 区域的宽度
        $(".resetAndConfirmWrap").width($(".firstRightModel").outerWidth())
        return
      } 

      // 让图标旋转180度
      if (currentClickIndex == 1 || currentClickIndex == 2) {
        var iconEle = $(event.target).children('i')
        this.rotateElement(iconEle)
        return
      }
      

    },
    onItemClick () {
      console.log('on item click')
    },
    setFocus () {
      this.$refs.search.setFocus()
    },
    resultClick (item) {
      this.$data.isSearch = true;
      console.log(JSON.stringify(item))
    },
    getResult (val) {
      console.log('on-change', val)
      this.results = val ? getResult(this.value) : []
    },
    onSubmit () {
      this.$refs.search.setBlur()
      this.$vux.toast.show({
        type: 'text',
        position: 'top',
        text: 'on submit'
      })
    },
    onFocus () {
      console.log('on focus')
    },
    onCancel () {
      this.$data.isSearch = false;
    },
    onScroll (event) {
      // console.log(this.$refs.myGroup[0].$el.getBoundingClientRect().height)
      var currentScrollTop = event.top;
      // console.log(this.$refs.groupTitle[0].$el.getBoundingClientRect().top)
      var allGroup =  this.$refs.myGroup
      var calHeight = 0;
      for (var i = 0; i < allGroup.length; i++) {
        calHeight += allGroup[i].$el.getBoundingClientRect().height;
        if (currentScrollTop < calHeight - 100){
          this.$data.currentLeftIndex = i;
          return;
        }
      }
    },
    onCellClick (clickIndex) {
      
      var allGroup =  this.$refs.myGroup
      var toTop = 0;
      for (var i = 0; i < clickIndex; i++) {
        toTop += allGroup[i].$el.getBoundingClientRect().height;
      }

      this.$refs.rightScroller.reset({top:toTop , duration:1000})
      this.$data.currentLeftIndex = clickIndex;
    }
  },
  mounted () {
    $(".material-design-icon").css("vertical-align" , "top")
    $(".myBtnsRow button").css({"color":"#232326" , "border":"1px solid white" , "background-color":"#f0f2f5"})
    var windowHeight = $(window).height()
    var headerHeight = $(".vux-header").outerHeight()
    var searchBoxHeight = $(".vux-search-box").outerHeight()
    var tabHeight = $(".weui-tabbar").outerHeight()
    this.$data.myHeight = windowHeight - headerHeight - searchBoxHeight - tabHeight + "px"
    // 修改多选按钮组中的样式样式
    this.modifyBtnsCss()
  },
  data () {
    return {
      allClassifyCellData:allClassifyCellDataFn(),
      selectClassifyCellData:"全部", // 全部分类 cell中右侧的提示字
      isFenleiPop:false,
      demo6: [2, 3],
      isPopRight:false,
      isSearch:false,
      results: [],
      value: 'test',
      menuTree: menu,
      active: [] , 
      myCols:2,
      currentLeftIndex:0,
      myHeight:"100px",
      bigArr: ["手机" , "电脑" , "服饰" , "美食" , "床上用品" , "户外" , "孕婴" , "婚嫁"],
      smallArr: ["小米" , "苹果" , "华为" , "中心" , "魅族" , "摩托罗拉" , "诺基亚" , "vivo"],
      type: '1',
      list: [
        {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题一',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: '/goods/goods_detail'
        },
        {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4223445256,1173646510&fm=27&gp=0.jpg',
          title: '苹果(Apple)iPhone 5s(A1530) 16GB 金色 移动联通4G手机',
          desc: '<p class="price">￥4129.00</p><p>好评95% 41112人</p>',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1862223967,3585946896&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        },
        {
          src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4223445256,1173646510&fm=27&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/goods/goods_detail',
            replace: false
          }
        }
        ,
        {
          src: '       ',
          title: '      ',
          desc: '        ',
          url: {
            path: '',
            replace: false
          }
        }
      ]
   }
  },
  computed: {
    pageSections() {
      const flatten = (tree, level = 1) => {
        const treeCloned = JSON.parse(JSON.stringify(tree))
        let flattened = []
        treeCloned.forEach(branch => {
          const { children } = branch
          delete branch.children
          branch.level = level
          flattened.push(branch)
          if (children) {
            flattened = [...flattened, ...flatten(children, level + 1)]
          }
        })
        return flattened
      }
      return flatten(menu)
    }
  }
}

function getResult (val) {
  let rs = []
  for (let i = 0; i < 20; i++) {
    rs.push({
      title: `${val} result: ${i + 1} `,
      other: {number:i}
    })
    
  }
  return rs
}
</script>
<style lang="less"> 
  /* 左侧滚动区域 */
  .leftScroll .weui-cell .vux-label{
    color: #666;
  }

  #myrightGroup .weui-cells{
    margin-top: 0;
    background-color: #F4F8FB
  }
  .active{
    color: red;
  }
  cell{
    
  }
  .grid-center {
    display: block;
    text-align: center;
    color: #666;
  }
  .grid-center img{
    width: 100%;
  }

  /* 分裂界面 右边boder边线问题 */
  #myGrid .weui-grid__icon{
    width: auto;
    height: 130px;
  }
  #myGrid .weui-grid__icon img{
    border-radius: 10px;
  }
  #myGrid::after{
    border-left: 0px;
  }
  #myGrid::before{
    border-top: 0px;
  }
  #myGrid .weui-grid::before{
    border-right: 0px;
  }
  #myGrid .weui-grid::after{
    border-bottom: 0px;
  }

  /*搜索界面 card样式*/
  @import '../../../static/css/1px.less';
  .card-demo-flex {
    display: flex;
  }
  .card-demo-content01 {
    padding: 10px 0;
  }
  .card-padding {
    padding: 15px;
  }
  .card-demo-flex > div {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }
  .card-demo-flex span {
    color: #f74c31;
  }

  /* 图标上下旋转动画 */
  .rotate{
      transform-origin:center center; //旋转中心要是正中间 才行
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transition: transform 0.2s; //过度时间 可调
      -moz-transition: -moz-transform 0.2s; 
      -moz-transition: -moz-transform 0.2s; 
      -o-transition: -o-transform 0.2s; 
      -ms-transition: -ms-transform 0.2s; 
  }

  .rotate1{
      transform-origin:center center;
      transform: rotate(0deg); //返回原点
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transition: transform 0.2s; 
      -moz-transition: -moz-transform 0.2s; 
      -moz-transition: -moz-transform 0.2s; 
      -o-transition: -o-transform 0.2s; 
      -ms-transition: -ms-transform 0.2s; 
  }

  /* 搜索界面图文列表 */
  #mylist img{
    width: auto;
  }
  #mylist .weui-media-box__title{
    white-space:normal;
  }

  .demo5-item-selected {
    background: #ffffff url(../../../src/assets/demo/active.png) no-repeat right bottom;
  }

  /* 第一个右侧model层 */
  .firstRightModel{
    background-color: white;
    position: absolute;
  }
  /* 重置/确定 按钮区域 */
  .firstRightModel .resetAndConfirmWrap{
    position: fixed;
    bottom: 0;
  }


  /* 多选按钮组 */
  .myBtnsRow{
    display: flex;
    // margin-top: 5px;
    justify-content: space-around;
  }
  .myBtnsRow button{
    flex: 1;
    margin-left: 5px;
    margin-right: 5px;
  }

  /* 价格区间 */
  .priceArea{
    margin-top: 15px;
    padding:0 15px;
  }
  .priceArea .priceNumber{
    margin-top: 15px;
    text-align: center;
  }
  .priceArea .priceNumber input{
    border: 0;
    width: 42%;
    height: 29px;
    border-radius: 6px;
    background-color: #f0f2f5;
    text-align: center;
  }


  /* 输入框中placeholder的颜色 */
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
      color:    #ddddde;
  }
  input:-moz-placeholder, textarea:-moz-placeholder { 
      color:    #ddddde;
  }
  input::-moz-placeholder, textarea::-moz-placeholder { 
      color:    #ddddde;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
      color:    #ddddde;
  }

  /* cell 折叠 展开 */
  .slide {
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
    background-color: #f3f4f6;
  }
  .slide p{
    border-bottom: 1px solid #d7d7d7;
    color: #252525;
  }
  .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
</style>
